<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap输入框强化</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    body{
        margin: 1%;
        padding: 2%;
    }
</style>

<body>

    <form action="" class="form-row">
        <div class="form-group col-6">
            <label for="username">登录邮箱</label>
            <div class="input-group">
                <input type="text" name="username" id="username" class="form-control" placeholder="请输入您的163邮箱">
                <div class="input-group-prepend">
                    <span class="input-group-text">@163.com</span>
                </div>
            </div>
        </div>
        <div class="form-group col-3">
            <label for="checkbox">复选框</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox" name="checkbox" id="checkbox">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group col-3">
            <label for="radio">单选框</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="radio" name="radio" id="radio">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group col-6">
            <label for="userinfo"></label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">姓</div>
                </div>
                <input type="text" name="userinfo-1" id="username-1" class="form-control">
                
                <div class="input-group-prepend">
                    <div class="input-group-text">名</div>
                </div>
                <input type="text" name="userinfo-2" id="username-2" class="form-control">
            </div>
        </div>
        <!-- 多个下拉菜单永远只会下拉第一个菜单得选项, 未解决 -->
        <div class="form-group col-12">
            <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">按钮1</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">菜单1</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">菜单2</a>
                <a href="#" class="dropdown-item">菜单3</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">菜单4</a>
                <a href="#" class="dropdown-item">菜单5</a>
            </div>
        </div>
        <div class="form-group col-7">
            <label for="select">选择框</label>
            <div class="input-group">
                <div class="input-group-perpent">
                    <span class="input-group-text">请选择</span>
                </div>
                <select name="select" id="select" class="form-control">
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
            </div>
        </div>
        <div class="form-group col-7">
            <label for="file">文件</label>
            <dev class="input-group">
                <div class="input-group-perpent">
                    <span class="input-group-text">地址:</span>
                </div>
                <div class="custom-file">
                    <input type="file" name="file" id="file" class="custom-file-input">
                    <label for="file" class="custom-file-label">上传文件</label>
                </div>
            </dev>
        </div>

    </form>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script>
        $('#file').change((e)=>{
            console.log(e);
            $('.custom-file-label').html(e.target.files[0].name);
        })
    </script>
</body>

</html>